<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .btn {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            min-height: 100px;
        }
        .progress-container {
            width: 100%;
            background-color: #f1f1f1;
            border-radius: 5px;
            margin-top: 10px;
            display: none;
        }
        .progress-bar {
            height: 20px;
            background-color: #4CAF50;
            border-radius: 5px;
            width: 0%;
            text-align: center;
            line-height: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文件上传测试</h1>
        <div class="form-group">
            <label for="server-url">服务器地址：</label>
            <input type="text" id="server-url" value="http://localhost:3001/api/upload" style="width: 300px;">
        </div>
        <div class="form-group">
            <label for="file">选择图片文件：</label>
            <input type="file" id="file" accept="image/*">
        </div>
        <div class="progress-container" id="progress-container">
            <div class="progress-bar" id="progress-bar">0%</div>
        </div>
        <button class="btn" onclick="uploadFile()">上传文件</button>
        <div class="result" id="result">
            <p>上传结果将显示在这里</p>
        </div>
    </div>

    <script>
        function uploadFile() {
            const fileInput = document.getElementById('file');
            const serverUrl = document.getElementById('server-url').value;
            const resultDiv = document.getElementById('result');
            const progressContainer = document.getElementById('progress-container');
            const progressBar = document.getElementById('progress-bar');
            
            if (!fileInput.files.length) {
                resultDiv.innerHTML = '<p style="color: red;">请先选择文件</p>';
                return;
            }
            
            const file = fileInput.files[0];
            
            // 检查文件大小
            if (file.size > 5 * 1024 * 1024) {
                resultDiv.innerHTML = '<p style="color: red;">文件大小超过5MB限制</p>';
                return;
            }
            
            // 显示进度条
            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            progressBar.textContent = '0%';
            
            const formData = new FormData();
            formData.append('image', file);
            
            const xhr = new XMLHttpRequest();
            
            // 监听上传进度
            xhr.upload.addEventListener('progress', (event) => {
                if (event.lengthComputable) {
                    const percentComplete = Math.round((event.loaded / event.total) * 100);
                    progressBar.style.width = percentComplete + '%';
                    progressBar.textContent = percentComplete + '%';
                }
            });
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            resultDiv.innerHTML = `
                                <h3>上传成功</h3>
                                <p>消息: ${response.message}</p>
                                <p>文件名: ${response.data.filename}</p>
                                <p>路径: ${response.data.path}</p>
                                <p>完整路径: ${response.data.fullPath}</p>
                                <img src="${response.data.fullPath}" style="max-width: 100%; max-height: 300px;">
                            `;
                        } catch (e) {
                            resultDiv.innerHTML = `
                                <h3>解析响应失败</h3>
                                <p>状态码: ${xhr.status}</p>
                                <p>响应文本: ${xhr.responseText}</p>
                            `;
                        }
                    } else {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            resultDiv.innerHTML = `
                                <h3 style="color: red;">上传失败</h3>
                                <p>状态码: ${xhr.status}</p>
                                <p>错误信息: ${response.message || '未知错误'}</p>
                            `;
                        } catch (e) {
                            resultDiv.innerHTML = `
                                <h3 style="color: red;">上传失败</h3>
                                <p>状态码: ${xhr.status}</p>
                                <p>响应文本: ${xhr.responseText}</p>
                            `;
                        }
                    }
                }
            };
            
            xhr.open('POST', serverUrl, true);
            xhr.send(formData);
            
            resultDiv.innerHTML = '<p>正在上传文件，请稍候...</p>';
        }
    </script>
</body>
</html>